<template>
  <view class="container">
    <sc-navbar back title="商品详情"></sc-navbar>
    <sc-view padding="22rpx 19rpx 0">
      <sc-image :src="commodityDetail.certificateConformityAddress" width="100%" height="337" round="8"></sc-image>
    </sc-view>
    <view class="item" v-for="item in getList(commodityDetail)" :key="item.label">
      <view class="item-label">{{ item.label }}</view>
      <view class="item-val" v-if="item.type === 'text'">{{ item.value }}</view>
      <sc-image class="item-val" v-else :src="item.value" mode="" width="90" height="90"></sc-image>
    </view>
  </view>
</template>
<script setup>
const getList = (detail) => {
  return [
    {
      label: "商品名称",
      value: detail.productName,
      type: "text",
    },
    {
      label: "商品编码",
      value: detail.tailorismCode,
      type: "text",
    },
    {
      label: "商品大类",
      value: detail.productCategory,
      type: "text",
    },
    {
      label: "商品类别",
      value: detail.productSubcategory,
      type: "text",
    },
    {
      label: "手术类型",
      value: detail.surgeryType,
      type: "text",
    },
    {
      label: "手术部位",
      value: detail.surgicalSite,
      type: "text",
    },
    {
      label: "规格",
      value: detail.specifications,
      type: "text",
    },
    {
      label: "型号",
      value: detail.model,
      type: "text",
    },
    {
      label: "厂家",
      value: detail.manufacturerName,
      type: "text",
    },
    {
      label: "品牌",
      value: detail.tailorismName,
      type: "text",
    },
    {
      label: "产品批号",
      value: detail.productBatchNumber,
      type: "text",
    },
    {
      label: "商品数量",
      value: detail.containCount,
      type: "text",
    },
    {
      label: "生产日期",
      value: detail.productionDate,
      type: "text",
    },
    {
      label: "有效期",
      value: detail.validityDate,
      type: "text",
    },
    {
      label: "灭菌效期",
      value: detail.sterilizationExpirationDate,
      type: "text",
    },
    {
      label: "灭菌批号",
      value: detail.sterilizationBatchNumber,
      type: "text",
    },
    {
      label: "追踪码",
      value: detail.trackingCode,
      type: "text",
    },
    {
      label: "UDI 编码",
      value: detail.udiCode,
      type: "text",
    },
    {
      label: "商品来源",
      value: detail.productSource,
      type: "text",
    },
    {
      label: "注册证号",
      value: detail.registrationCertificateNumber,
      type: "text",
    },
    {
      label: "合格证",
      type: "image",
      value: detail.certificateConformityAddress,
    },
  ];
};

import { useTemporaryStore } from "@/store/temporary";
const commodityDetail = ref();
onLoad(() => {
  const temporaryStore = useTemporaryStore();
  commodityDetail.value = temporaryStore.commodity;
});
</script>

<style lang="scss" scoped>
.item {
  width: 100vw;
  height: 90rpx;
  padding: 0 65rpx 0 60rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .item-title {
    font-family: Alibaba PuHuiTi 2, Alibaba PuHuiTi 20;
    font-weight: 400;
    font-size: 26rpx;
    color: #3d3d3d;
    line-height: 45rpx;
  }

  .item-val {
    font-family: Alibaba PuHuiTi 2, Alibaba PuHuiTi 20;
    font-weight: 400;
    font-size: 23rpx;
    color: #3d3d3d;
    line-height: 45rpx;
  }
}
</style>
